<template lang="">
  <div class="productList">
    <van-cell v-for="item in topCate" :key="item.category_id">
      <!-- 路由跳转 -->
      <!--  -->
      <!-- 使用 title 插槽来自定义标题 -->
  
        <template #title>
          <router-link :to="'/cartCategroy/'+item.id">
          <van-image class="prod_img" :src="item.image_url"></van-image>
          </router-link>
        </template>
        <template #value>
          <router-link :to="'/cartCategroy/'+item.id">
          <div class="prod_price">
            <span>{{item.name}}</span>
            <br>
            <span>{{item.price}}</span>
          </div>
      </router-link>
        </template>
    </van-cell>
  </div>
</template>
<script setup>
 import {ref, onMounted} from 'vue'
import {getAllCategories } from '@/api/category' // 接口

  // 产品数据
  const topCate = ref([])

  // 参数 传入索引 
const props = defineProps({
  prto_id: {
      type: Number,
      required: true
  },
  //   activeIndex: {
  //     type: Number,
  //     required:true
  // },
  // prto_img: {
  //   type: String,
  //   required:true
  //   }
})

  // 加载数据
onMounted(async () => {

  // 根据id 
  const res = await getAllCategories()
    topCate.value = res.data[props.prto_id].products
    // console.log('res1数据', res.data);
  })
  
</script>

<style lang="scss" scoped >
.productList{
   margin-top: 30px;
   margin-left: 10px;
   .prod_img{
    width:80%;
    background-size: cover;
    background-color:rgb(245, 245, 245);
   }
  .van-cell{
    background-color:rgb(245, 245, 245);
    // margin-left: 15px;
    margin-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
    .van-cell__value{
      padding-left: 0px;
      text-align: left;
      // font-repeat: no-repeat;
      white-space:nowrap;
      .prod_price{
        position: absolute;
        top: 20px;
        left: 3px;
        span{
          color: #666;
          font-size: 11px;
       }
      }

    }
  }
  .main-content-component{
    height: auto;
  }
}


</style>